<template>
  <div class="points-container">
    <!-- 积分头部 -->
    <div class="points-header">
      <div class="points-info">
        <img src="@/assets/images/points-icon.png" class="points-avatar" alt="积分图标"/>
        <div class="points-detail">
          <div class="points-amount">{{ userPoints }} <span>积分</span></div>
          <div class="points-desc">充电赢积分，积分兑好礼</div>
        </div>
      </div>
    </div>

    <!-- 积分兑换区域 -->
    <div class="exchange-section">
      <div class="section-title">积分兑现金/优惠券</div>
      <div class="voucher-list">
        <div v-for="(voucher, index) in vouchers" :key="index" class="voucher-item">
          <div class="voucher-left">
            <div class="voucher-amount">
              <span class="currency">¥</span>
              <span class="number">{{ voucher.amount }}</span>
            </div>
            <div class="voucher-points">{{ voucher.points }}积分</div>
          </div>
          <div class="voucher-right">
            <div class="voucher-name">{{ voucher.name }}</div>
            <div class="voucher-expire">下架时间：{{ voucher.expireTime }}</div>
            <el-button
                :type="voucher.canExchange ? 'primary' : 'info'"
                size="small"
                :disabled="!voucher.canExchange"
                @click="handleExchange(voucher)"
            >
              {{ voucher.canExchange ? '立即兑换' : '积分不足' }}
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 积分兑换商品 -->
    <div class="exchange-section">
      <div class="section-title">积分兑换物品</div>
      <div class="goods-list">
        <div v-for="(good, index) in goods" :key="index" class="goods-item">
          <img :src="good.image" :alt="good.name" class="goods-image"/>
          <div class="goods-info">
            <div class="goods-name">{{ good.name }}</div>
            <div class="goods-points">{{ good.points }}积分</div>
            <el-button
                :type="good.points <= userPoints ? 'primary' : 'info'"
                size="small"
                :disabled="good.points > userPoints"
                @click="handleExchangeGoods(good)"
            >
              立即兑换
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const userPoints = ref(610)

// 优惠券数据
const vouchers = ref([
  {
    amount: 5,
    points: 500,
    name: '5元全场通用现金券',
    expireTime: '2024-02-21 10:00到期',
    canExchange: true
  },
  {
    amount: 2,
    points: 200,
    name: '2元全场通用现金券',
    expireTime: '2024-02-21 10:00到期',
    canExchange: true
  },
  {
    amount: 20,
    points: 2000,
    name: '20元全场通用现金券',
    expireTime: '2024-02-21 10:00到期',
    canExchange: false
  },
  {
    amount: 50,
    points: 5000,
    name: '50元全场通用现金券',
    expireTime: '2024-02-21 10:00到期',
    canExchange: false
  }
])

// 商品数据
const goods = ref([
  {
    name: 'XXXXXXX抽纸200抽*6包',
    points: 800,
    image: '@/assets/images/tissue.jpg'
  },
  {
    name: 'XXXXXXX抽纸300抽*8包',
    points: 580,
    image: '@/assets/images/tissue-large.jpg'
  }
])

// 获取用户积分
const fetchUserPoints = async () => {
  try {
    const response = await axios.get('/api/customers/info', {
      headers: {
        'Authorization': localStorage.getItem('token')
      }
    })
    if (response.data) {
      userPoints.value = response.data.points || 0
    }
  } catch (error) {
    console.error('获取积分失败:', error)
  }
}

// 兑换优惠券
const handleExchange = (voucher) => {
  if (userPoints.value < voucher.points) {
    ElMessage.warning('积分不足')
    return
  }

  ElMessage.success('兑换成功')
  userPoints.value -= voucher.points
}

// 兑换商品
const handleExchangeGoods = (good) => {
  if (userPoints.value < good.points) {
    ElMessage.warning('积分不足')
    return
  }

  ElMessage.success('兑换成功')
  userPoints.value -= good.points
}

onMounted(() => {
  fetchUserPoints()
})
</script>

<style scoped>
.points-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.points-header {
  background: #ff6b6b;
  color: white;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.points-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.points-avatar {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

.points-amount {
  font-size: 24px;
  font-weight: bold;
}

.points-desc {
  font-size: 14px;
  opacity: 0.8;
  margin-top: 4px;
}

.exchange-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #333;
}

.voucher-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.voucher-item {
  display: flex;
  background: #fff1f0;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #ffccc7;
}

.voucher-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  border-right: 1px dashed #ffccc7;
  min-width: 120px;
}

.voucher-amount {
  color: #ff4d4f;
  display: flex;
  align-items: baseline;
}

.currency {
  font-size: 16px;
}

.number {
  font-size: 28px;
  font-weight: bold;
}

.voucher-points {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.voucher-right {
  flex: 1;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.voucher-name {
  font-size: 15px;
  color: #333;
}

.voucher-expire {
  font-size: 12px;
  color: #999;
  margin: 4px 0;
}

.goods-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.goods-item {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.goods-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.goods-info {
  padding: 12px;
}

.goods-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}

.goods-points {
  color: #ff4d4f;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .points-container {
    padding: 10px;
  }

  .voucher-item {
    flex-direction: column;
  }

  .voucher-left {
    border-right: none;
    border-bottom: 1px dashed #ffccc7;
    padding-bottom: 12px;
    margin-bottom: 12px;
  }

  .goods-list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
</style>